<template>
  <div class="add-food">
    <!-- 导航栏组件 -->
    <Header />
    <div class="container mt-5">
      <h1 class="mb-4">添加美食</h1>
      <!-- 表单提交时调用 submitForm 方法 -->
      <form @submit.prevent="submitForm">
        <div class="form-group">
          <label for="name">美食名称</label>
          <!-- 双向绑定美食名称 -->
          <input type="text" id="name" v-model="form.name" class="form-control" required />
        </div>
        <div class="form-group">
          <label for="steps">制作步骤</label>
          <!-- 双向绑定制作步骤 -->
          <textarea id="steps" v-model="form.steps" class="form-control" required></textarea>
        </div>
        <div class="form-group">
          <label>所需食材</label>
          <!-- 遍历食材数组，动态生成输入框 -->
          <div v-for="(ingredient, index) in form.ingredients" :key="index" class="d-flex mb-2">
            <input type="text" v-model="ingredient.name" placeholder="食材名称" class="form-control mr-2" required />
            <input type="text" v-model="ingredient.amount" placeholder="用量" class="form-control" required />
            <!-- 点击按钮调用 removeIngredient 方法删除当前食材 -->
            <button type="button" class="btn btn-danger ml-2" @click="removeIngredient(index)">删除</button>
          </div>
          <!-- 添加食材按钮 -->
          <button type="button" class="btn btn-primary mt-2" @click="addIngredient">添加食材</button>
        </div>
        <div class="form-group">
          <label for="image">图片URL</label>
          <!-- 双向绑定图片URL -->
          <input type="text" id="image" v-model="form.image" class="form-control" />
        </div>
        <!-- 提交按钮 -->
        <button type="submit" class="btn btn-primary mt-4">提交</button>
      </form>
    </div>
    <!-- 页脚组件 -->
    <Footer />
  </div>
</template>

<script>
import { mapActions } from 'vuex'; // 导入 Vuex 中的 mapActions 辅助函数
import Header from '@/components/Header.vue'; // 导入 Header 组件
import Footer from '@/components/Footer.vue'; // 导入 Footer 组件

export default {
  components: {
    Header, // 注册 Header 组件
    Footer, // 注册 Footer 组件
  },
  data() {
    return {
      form: {
        name: '', // 美食名称
        steps: '', // 制作步骤
        ingredients: [{ name: '', amount: '' }], // 食材列表，初始化为一个空的食材对象
        image: '', // 图片URL
      },
    };
  },
  methods: {
    ...mapActions(['addFood']), // 映射 addFood 动作到组件方法
    // 添加食材
    addIngredient() {
      this.form.ingredients.push({ name: '', amount: '' }); // 添加一个空的食材对象到 ingredients 数组中
    },
    // 删除食材
    removeIngredient(index) {
      this.form.ingredients.splice(index, 1); // 根据索引删除对应的食材
    },
    // 提交表单
    submitForm() {
      const newFood = {
        id: Date.now(), // 使用时间戳作为新菜品的 ID
        ...this.form,
        comments: [], // 初始化评论为空数组
      };
      this.addFood(newFood); // 调用 Vuex 中的 addFood 动作添加新菜品
      this.$router.push('/'); // 提交后跳转到首页
    },
  },
};
</script>

<style scoped>
.add-food {
  text-align: center; /* 设置添加美食页面的文本居中对齐 */
}

.form-group {
  margin-bottom: 1.5rem; /* 设置表单组的底部外边距 */
}

.btn {
  margin-right: 0.5rem; /* 设置按钮的右外边距 */
}
</style>

